import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
import myStyle from './index.less';
import holidayPng from '../../../assets/busi/investmentCalendar/holiday.png';
import Marquee from './marquee/index';
import MyCalendar from '../../../comps/calendar';

@connect(({ investmentCalendarM, loading }) => ({
  investmentCalendarM,
  loading,
}))
@Form.create()
export default class CalendarC extends PureComponent {
  // props默认值
  static defaultProps = {
    onRef: () => {}, // 本组件的引用
  };
  state = {
    portfolioCodeList: undefined, //组合
    date: moment(), //当前月份
    data: [], //日历汇总数据
    currentTime: undefined, //当前时间戳
    currentDom: undefined, //当前组件的dom
  };

  componentDidMount() {
    this.props.onRef(this);
    //初始化请求数据
    this.setState(
      {
        portfolioCodeList: this.props.portfolioCodeList,
        date: this.props.date,
        currentTime: this.props.currentTime,
      },
      () => {
        this.queryCalendarList(); //查询汇总信息
      },
    );
  }

  componentDidUpdate() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.state.currentTime && this.state.currentTime != nextProps.currentTime) {
      //点击了查询按钮
      this.setState(
        {
          portfolioCodeList: nextProps.portfolioCodeList,
          date: nextProps.date,
          currentTime: nextProps.currentTime,
        },
        () => {
          this.queryCalendarList(); //查询汇总信息
        },
      );
    }
  }
  //查询汇总信息
  queryCalendarList = () => {
    const { portfolioCodeList, date } = this.state;
    this.props.dispatch({
      type: 'investmentCalendarM/queryTotal',
      payload: {
        portfolioCode: portfolioCodeList,
        date: moment(date).format('YYYY-MM'),
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            data: [...data],
          });
        }
      },
    });
  };
  //更新msg滚动数据
  upDateMsgList = (date, list) => {
    const { data } = this.state;
    data.map((item) => {
      if (item.currentDate == moment(date).format('YYYYMMDD')) {
        item.msgList = list;
      }
    });
    this.setState({
      data: [...data],
    });
  };

  getListData = (value) => {
    const { data } = this.state;
    let dateObj; //每天对应的数据
    data.map((item) => {
      if (item.currentDate == value.format('YYYYMMDD')) {
        dateObj = item;
      }
    });
    return dateObj || {};
  };

  dateCellRender = (value) => {
    //自定义渲染日期单元格，返回内容会被追加到单元格
    const dateObj = this.getListData(value);
    return (
      <div>
        {dateObj.isHoliday === 0 ? (
          <div className={myStyle.isHoliday}>
            <img src={holidayPng} />
          </div>
        ) : Object.keys(dateObj).length ? (
          <div className={myStyle.calendarConent}>
            {dateObj.msgList && dateObj.msgList.length ? <Marquee loopData={[{ txt: dateObj.msgList.join('/') }]} /> : <li className='msg'></li>}
            <div className={myStyle.labelStyle}>
              <span className={dateObj.cn == 0 ? '' : myStyle.isGray}>CN</span>
              <span className={dateObj.ib == 0 ? '' : myStyle.isGray}>IB</span>
            </div>
            <ul>
              <li className={myStyle.product} style={{ display: dateObj.product ? 'inherit' : 'none' }}>
                <span>产品</span>
                <span className={myStyle.spanColor}>{dateObj.product}</span>
              </li>
              <li className={myStyle.trade} style={{ display: dateObj.trade ? 'inherit' : 'none' }}>
                <span>交易</span>
                <span className={myStyle.spanColor}>{dateObj.trade}</span>
              </li>
              <li className={myStyle.action} style={{ display: dateObj.action ? 'inherit' : 'none' }}>
                <span>行为</span>
                <span className={myStyle.spanColor}>{dateObj.action}</span>
              </li>
              <li className={myStyle.register} style={{ display: dateObj.register ? 'inherit' : 'none' }}>
                <span>登记</span>
                <span className={myStyle.spanColor}>{dateObj.register}</span>
              </li>
            </ul>
          </div>
        ) : null}
      </div>
    );
  };

  render() {
    const { loading } = this.props;
    return (
      <div>
        <MyCalendar
          date={this.props.date}
          onSelect={(e) => {
            this.props.onSelect(e);
          }}
          loading={loading.effects['investmentCalendarM/queryTotal'] === true}
          dateCellRender={this.dateCellRender}
          child={
            <div className='myLabel'>
              <span>CN:交易所</span>
              <span>IB:银行间</span>
            </div>
          }
        />
      </div>
    );
  }
}
